<template>
  <div class="SendOrderNew">
    <div class="box">
      <div class="top">
        <div class="price">
          <span>￥</span>
          <span>2.5</span>
        </div>
        <div class="time">3分钟前下单（建议14：32前送达）</div>
        <div class="orderNum">001</div>
      </div>
      <div class="bot">
        <div class="take">
          <div class="left">
            <div class="icon">
              <img src="../../../../static/img/send/qu.png" alt="">
            </div>
            <div>1.0km</div>
          </div>
          <div class="right">
            <div class="name">庆丰包子铺（顺义建新店）</div>
            <div class="address">西安市雁塔区曲江池东路金地广场68号旺座 国际b座4楼201室</div>
          </div>
          <div class="nav">
            <img src="../../../../static/img/send/nav.png" alt="">
          </div>
        </div>
        <div class="send">
          <div class="left">
            <div class="icon">
              <img src="../../../../static/img/send/song.png" alt="">
            </div>
            <div>1.0km</div>
          </div>
          <div class="right">
            <div class="name">庆丰包子铺（顺义建新店）</div>
            <div class="address">西安市雁塔区曲江池东路金地广场68号旺座 国际b座4楼201室</div>
          </div>
          <div class="nav">
            <img src="../../../../static/img/send/nav.png" alt="">
          </div>
        </div>
      </div>
      <div class="btn">
        <div class="refuse" @click="call('11212')">
          <div class="call">
            <img src="../../../../static/img/send/tel.png" alt="" />
          </div>
          <div>联系收货人</div>
        </div>
        <div class="sure" @click="toDetail('1')">查看导航</div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "SendOrderNew",
    data() {
      return {
        tel:17391751754
      };
    },
    methods:{
      call(phone){
        // 调用拨号功能
        window.location.href = 'tel://' + phone;
      },
      toDetail(id){
        this.$router.push({path:"/views/Send/orderDetail",query:{id:id}})
      }
    }
  }
</script>

<style scoped>
  .SendOrderNew{
    padding-top: .1rem;
  }
  .SendOrderNew .box{
    width: 3.53rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .03rem .15rem 0 rgba(4, 0, 0, 0.15);
    border-radius: .04rem;
    margin: 0 auto .16rem;
    overflow: hidden;
  }
  .SendOrderNew .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .1rem;
    border-bottom: 1px solid #F5F5F5;
  }
  .SendOrderNew .top .price{
    display: flex;
    font-size: .12rem;
    align-items: center;
    color: #F42016;
    margin-right: .1rem;
  }
  .SendOrderNew .top .price span:nth-child(2){
    font-size: .18rem;
    font-weight: bold;
    margin-left: .02rem;
  }
  .SendOrderNew .top .time{
    flex-grow: 1;
    font-size: .13rem;
    color: #333333;
  }
  .SendOrderNew .orderNum{
    color: #FED206;
    font-size: .17rem;
  }
  .SendOrderNew .bot{
    padding: .1rem .12rem;
  }
  .SendOrderNew .bot>div{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: .12rem;
  }
  .SendOrderNew .bot>div img{
    width: 100%;
  }
  .SendOrderNew .bot>div .icon{
    width: .21rem;
    height: .25rem;
    overflow: hidden;
    margin-bottom: .05rem;
  }
  .SendOrderNew .bot>div .right{
    margin: 0 .1rem;
  }
  .SendOrderNew .bot>div .nav{
    width: .25rem;
    height: .25rem;
    overflow: hidden;
    margin-top: .15rem;
  }
  .SendOrderNew .bot .left{
    color: #666666;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .SendOrderNew .bot .right .name{
    font-size: .15rem;
    color: #333333;
  }
  .SendOrderNew .bot .right .address{
    margin-top: .05rem;
    font-size: .13rem;
    color: #999999;
  }
  .SendOrderNew .bot .send{
    margin-top: .15rem;
  }
  .SendOrderNew .btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .12rem 0;
    color: #333333;
  }
  .SendOrderNew .refuse{
    border: 1px solid #FED206;
    font-size: .15rem;
    width: 1.23rem;
    height: .34rem;
    line-height: .36rem;
    border-radius: .18rem;
    text-align: center;
    margin-right: .12rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  .SendOrderNew .refuse .call{
    width: .15rem;
    height: .25rem;
    margin-right: .1rem;
    overflow: hidden;
  }
  .SendOrderNew .sure{
    background: #FED206;
    width: 1.25rem;
    height: .36rem;
    line-height: .36rem;
    border-radius: .18rem;
    text-align: center;
    margin-right: .1rem;
    font-size: .15rem;
    font-weight: bold;
  }
</style>
